<template>
  <div class="ten_box">
    <m-header modile-title="练习20" go-back="true"></m-header>
    <div class="safetyInfo">
      <input type="text" name="" id="" @keyup.enter="btn" placeholder="搜索" v-model.trim="search"/>
      <button @click="btn">搜索</button>
    </div>
    <ul class="list_ul" v-show="listShow">
      <li v-for="(list,index1) in searchData" :key="index1">
        <div v-for="(list2,index2) in list" @click="okBtn(list2.title)">
          <span>{{list2.title}}</span>
        </div>
      </li>
    </ul>
    <!--展示搜索后选择的结果-->
    <ul class="ok_show">
      <li v-for="itme in showText">
        {{itme}}
      </li>
    </ul>
    <div class="liucheng">
      <p>
        <span>操作流程简介：</span>
        点击开始扫描，将二维码对准在扫描框里扫描，扫描成功后悔显示扫描结果，然后点击选择（已送达或已回收），
        然后点击立即绑定就可以了。
      </p>
    </div>
    <!--扫一扫部分-->
    <div class="login_div">
      <div id="wxsys" @click="sys_click()"></div>
    </div>
    <div class="saomao_result">
      <p>扫描结果：2019</p>
    </div>
    <!--选择提交部分-->
    <div class="post_div">
      <ul>
        <li>
          <label class="checkbox-label" v-for="(label,index2) in lesson">
            <input v-model="selectArr" :value="index2" :checked="index2 == 0" type="radio"
                   class="checkbox-input event-allChooseHouse" @click="selectOne(label.id)">
            <span class="checkbox-core"></span>
            <span class="text">{{label.value}}</span>
          </label>
        </li>
      </ul>
      <button>立即绑定</button>
    </div>
  </div>
</template>
<style lang="scss">
  .ten_box {
    padding-top: 60px;
    background: #ffffff;
    .login_div {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
      #wxsys {
        background: url("../image/saomiaokuang@2x.png");
        width: 100px;
        height: 100px;
        background-size: 100%;
      }
    }
    .safetyInfo {
      width: 100%;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      input {
        width: 75%;
        height: 60px;
        font-size: 20px;
        padding: 10px;
        outline: none;
      }
      button {
        width: 20%;
        height: 60px;
        font-size: 26px;
        background: #2585d0;
        color: #ffffff;
        border: none;
      }
    }
    .list_ul {
      li {
        width: 100%;
        font-size: 15px;
        div {
          padding: 10px;
          border-bottom: 1px solid #f2f2f2;
          span {
            font-size: 20px;
          }
        }
      }
    }
    .ok_show {
      border-bottom: 10px solid #f2f2f2;
      li {
        font-size: 20px;
        color: #2585d0;
        border-bottom: 1px solid #f2f2f2;
        padding: 10px;
      }
      li:last-child {
        border: none;
      }
    }
    .liucheng {
      padding: 10px;
      p {
        font-size: 20px;
        color: #666666;
        span {
          color: #2585d0;
        }
      }
    }
    .saomao_result {
      display: flex;
      justify-content: center;
      padding: 20px 10px;
      p {
        font-size: 22px;
      }
    }
    .post_div {
      width: 100%;
      height: 80px;
      background: #ffffff;
      position: fixed;
      bottom: 0;
      z-index: 2;
      border-top: 1px solid #666666;
      display: flex;
      ul {
        width: 50%;
        li {
          display: flex;
          align-items: center;
          height: 80px;
          .checkbox-label {
            padding: 0 0.1rem;
            display: flex;
            align-items: center;
          }
          .checkbox-label .checkbox-input {
            display: none;
            opacity: 0;
          }
          .checkbox-label .checkbox-core {
            display: inline-block;
            border-radius: 100%;
            /*background: #e6e7e9;*/
            border: 1px solid #c2c2c2;
            position: relative;
            width: 30px;
            height: 30px;
            vertical-align: middle;
          }
          .checkbox-core:after {
            border: 2px solid transparent;
            border-left: 0;
            border-top: 0;
            content: " ";
            top: 1px;
            left: 7px;
            position: absolute;
            width: 15px;
            height: 15px;
            -webkit-transform: rotate(45deg) scale(0);
            transform: rotate(45deg) scale(0);
            -webkit-transition: -webkit-transform .2s;
            transition: -webkit-transform .2s;
            transition: transform .2s;
            transition: transform .2s, -webkit-transform .2s;
          }
          .checkbox-input:checked + .checkbox-core {
            background-color: #26a2ff;
            border-color: #26a2ff;
          }
          .checkbox-input:checked + .checkbox-core:after {
            border-color: #fff;
            -webkit-transform: rotate(45deg) scale(1);
            transform: rotate(45deg) scale(1);
          }
          .text{
            font-size: 20px;
            margin-left: 10px;
          }
        }
      }
      button{
        width: 50%;
        border: none;
        background: #2585d0;
        font-size: 24px;
        color: #ffff;
      }
    }
  }
</style>
<script>
  import mHeader from '../../../../components/header'
  import wx from 'weixin-js-sdk'
  import {getConfig, searchKeyword} from "../../../../api/data";

  export default {
    data() {
      return {
        search: '',
        searchData: {},
        listShow: false, // 搜索的展示列表
        products: [
          //假数据
          {name: "数据1", date: '2018-01-04', depart: '泸化工1'},
          {name: "数据2", date: '2018-01-25', depart: '泸化工2'},
          {name: "数据3", date: '2018-02-10', depart: '泸化工3'},
          {name: "数据4", date: '2018-03-04', depart: '泸化工4'},
          {name: "数据5", date: '2018-05-24', depart: '泸化工5'},
          {name: "数据6", date: '2018-10-29', depart: '泸化工6'}
        ],
        showText: [],
        selectArr: [],
        lesson: [
          {
            id: 1, value: '已送达'
          },
          {id: 2, value: '已回收'}
        ]
      }
    },
    methods: {
      // 调用扫一扫的方法
      sys_click: function () {
        getConfig().then(res => {
          if (res.code === 200) {
            wx.config({
              debug: false,
              appId: res.data.appId,
              timestamp: res.data.timestamp,
              nonceStr: res.data.nonceStr,
              signature: res.data.signature,
              jsApiList: ['checkJsApi', 'scanQRCode']
            })
            wx.ready(() => {
              wx.checkJsApi({
                jsApiList: ['scanQRCode'],
                success: function (res) {
                  console.log(res)
                }
              })
              wx.scanQRCode({
                needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
                success: function (res) {
                  var result = res.resultStr // 当needResult 为 1 时，扫码返回的结果
                  alert('扫描结果：' + result)
                }
              })
            })
          }
        })
      },
      btn() {
        this.listShow = false
        searchKeyword(this.search).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.searchData = res.data
            this.listShow = true
          }
        })
      },
      okBtn(name) {
        // console.log(name)
        this.listShow = false
        // this.showText = name
        this.showText.push(name)
      },
      selectOne(id) {
        console.log(id)
      },
    },
    components: {
      mHeader
    }
  }
</script>
